<template>
    <div class="box">
    <el-row>
        <el-col :span="13">
            <blockquote>对于普通的大小标题，使用 echarts 自带的就挺好</blockquote>
            <sea-charts :options="options1" style="overflow: hidden; height: 400px">
            </sea-charts>
        </el-col>

        <el-col :span="11">
            <textarea class="textarea code smart-block" rows="20"
                      :value="code1"></textarea>
        </el-col>

        <el-col :span="13">
            <blockquote>对于其它方向上的标题，适配不是很好，直接使用布局实现会更好</blockquote>
            <sea-charts :options="options2" style="overflow: hidden; height: 400px">
            </sea-charts>
        </el-col>


        <el-col :span="11">
            <textarea class="textarea code smart-block" rows="16"
                      :value="code2"></textarea>
        </el-col>

    </el-row></div>
</template>

<script setup lang="ts">

const code1 = `
return {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};
`;
const options1: echarts.EChartsOption = new Function(code1)();


const code2 = `
return option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      symbolSize: 20,
      data: [
        [10.0, 8.04],
        [8.07, 6.95],
        [13.0, 7.58],
        [9.05, 8.81],
        [11.0, 8.33],
        [14.0, 7.66],
        [13.4, 6.81],
        [10.0, 6.33],
        [14.0, 8.96],
        [12.5, 6.82],
        [9.15, 7.2],
        [11.5, 7.2],
        [3.03, 4.23],
        [12.2, 7.83],
        [2.02, 4.47],
        [1.05, 3.33],
        [4.05, 4.96],
        [6.03, 7.24],
        [12.0, 6.26],
        [12.0, 8.84],
        [7.08, 5.82],
        [5.02, 5.68]
      ],
      type: 'scatter'
    }
  ]
};
`
const options2: echarts.EChartsOption = new Function(code2)();
</script>

